<template>
  <div>
    <h1>TodoList</h1>
    <todo-input @emit-todo="createTodo"/>
    <div v-if="todos.length > 0">
      <todo-item
        v-for="(item, index) in todos"
        :key="item.objectId"
        :text="item.content"
        :completed="item.completed"
        :index="index"
        :id="item.objectId"
        @emit-checked="emitChecked"
      >
      </todo-item>
    </div>
    <div v-else>暂无数据</div>
  </div>
</template>

<script>
import TodoItem from "@/components/TodoItem";
import TodoInput from "@/components/TodoInput";
import { mapState } from 'vuex'

export default {
  name: "TodoList",
  components: {TodoItem, TodoInput},
  data() {
    return {
      todoText: ''
    }
  },
  computed: {
    ...mapState('todolist', ['todos'])
  },
  created() {
    this.$store.dispatch('todolist/fetchList')
  },
  methods: {
    createTodo(data) {
      this.$store.dispatch('todolist/createTodo', data)
    },
    emitChecked(data) {
      this.$store.dispatch('todolist/completedTodo', data)
    }
  }
}

/*
* 父组件 -> 子组件传值 props
* 子组件 -> 父组件传值 $emit()自定义事件
* $emit发送     @xxx= 接收
* */
</script>

<style scoped>

</style>